<template>
  <div class="m-login-container">
    <el-row class="m-main-header-search">
      <el-button @click="handleOpareteClick(1)" type="primary" size="small" icon="el-icon-circle-plus-outline">
        新增
      </el-button>
    </el-row>
    <div class="m-main-content-body">
        <p class="contant-body-title">商品列表</p>
    <el-table
      v-loading="loading"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
      :inline="false"
      stripe
      :header-cell-style="{
        'background-color': '#E5EEFF',
      }"
    >
      <el-table-column
        prop="name"
        label="商品名"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="sn"
        label="商品内部编号"
        width="140"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="60"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="region"
        label="地区"
         width="80"
         show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="user_name"
        label="运营"
        width="60"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="time"
        label="创建时间"
        width="170"
        show-overflow-tooltip
      >
      <template slot-scope="scope">
        {{ scope.row.time ? $moment(scope.row.time).format('YYYY/MM/DD HH:mm:ss') : '--' }}
      </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="140"

      >
        <template slot-scope="scope">
          <el-button
            class="table-operate-btn"
            @click="copy2Clipboard(scope.row.id)"
            type="text"
            size="small"
          >
            复制
          </el-button>
          <el-button
            class="table-operate-btn"
            @click="handleOpareteClick(2, scope.row)"
            type="text"
            size="small"
          >
            编辑
          </el-button>
          <el-button
            class="table-operate-btn red-btn-text"
            @click="del(scope.row)"
            type="text"
            size="small"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="val => handlePageMetaChange(val, 'size')"
        @current-change="val => handlePageMetaChange(val, 'page')"
        :current-page="pageMeta.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageMeta.limit"
        layout="sizes, prev, next, jumper"
        :total="pageMeta.total"
      >
      </el-pagination>
    </div>
    </div>
  </div>
</template>

<script>
import { copy2Clipboard } from '@/utils/index'

export default {
  components: {
  },
  data() {
    return {
      list: [],
      loading: false,
      dislogSetVisible: false,
      pageMeta: {
        page: 1,
        limit: 10,
        total: 1e10,
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    /*
     * @Desc: 获取列表
     * @params: {String}
     * @return: {Object}
     */
    async getList() {
      this.loading = true;
      const { data } = await this.$api.product.getList({
        ...this.pageMeta,
        page: this.pageMeta.page - 1
      });
      const { code, data: list } = data;
      if (code === 200) {
        this.list = list;
      }
      this.loading = false;
    },

    /*
     * @Desc: 编辑/新增
     * @params: {String}
     * @return: {Object}
     */
    async handleOpareteClick(type, row = {}) {
      const query = {
        type,
      };
      if (row.id) query.product_id = row.id;
      this.$router.push({
        name: "productInfo",
        query,
      });
    },

    /**
     * @Desc 分页
     * @params {String} val page/limit
     * @params {String} type  page/size
     * @return {Object}
     * */
    handlePageMetaChange(val, type = 'size' ) {
      this.pageMeta[type === 'size' ? 'limit' : 'page' ] = val;
      this.getList();
    },

    /*
     * @Desc: 复制剪切板
     * @params: {String}
     * @return: {Object}
     */
    copy2Clipboard,

     /**
     * @Desc 删除
     * @return {Object}
     * */
    del({ id }) {
      this.$delConfirm(null, null, async () => {
        const { data } = await this.$api.product.delProduct({
           product_id: id
        });
        const { code, msg } = data
        if(code === 200){
          this.$message.success("操作成功");
          this.handlePageMetaChange(1, 'page')
        } else {
           this.$message.warning(msg);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
